<include file="public/header" />
<body>
<div class="layui-card">
    <div class="layui-card-body ">
        <div class="demoTable">

            <div class="layui-input-inline layui-show-xs-block">
                <input class="layui-input" id="username" placeholder="名称" name="username"></div>

            <div class="layui-input-inline layui-show-xs-block">
                <button class="layui-btn" data-type="reload">
                    <i class="layui-icon">&#xe615;</i></button>
            </div>
            <a href="javascript:void(0) " class="layui-btn" onclick="xadmin.open('上传','{:url('Payment/editPayment')}',800,600)">
                新增</a>
        </div>

    </div>
</div>
<table id="demo" lay-filter="edit"></table>
<script type="text/html" id="barDemo">
    <!--      <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>




<script>
    layui.use(['table','util','laydate'], function(){
        var table = layui.table
            ,form = layui.form
            ,util = layui.util,
            laydate = layui.laydate;
        //第一个实例

//日期选择器
        //日期范围
        laydate.render({
            elem: '#date'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            ,range: ['#start_time', '#end_time']
        });
        layui.table.set({
            defaultToolbar: [
                'filter','exports'
            ]
        })

        table.render({
            elem: '#demo'
            ,url: "{:url('payment/lists')}" //数据接口
            ,data:{branchId:1}
            ,method:'GET'
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,width:'100%'
            ,response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 200 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }
            ,cols: [[ //表头
                {field: 'id', title: 'id',width:80},
                {field: 'store_name', title: '所属门店',width:300}
                ,{field: 'appid', title: '微信appId',width:200}
                ,{field: 'appkey', title: '微信私钥',width:200}
                ,{field: 'merchant_id', title: '商户号',width:200}
                ,{field: 'rate', title: '分账比例%', width:200}
                ,{field: 'status', title: '开启分账',width:200}
                ,{fixed: 'right', title:'操作', width:300,toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'

        });



        //触发单元格工具事件
        table.on('tool(edit)', function(obj){ // 双击 toolDouble

            console.log(obj)
            var data = obj.data;
            var id= obj.data.id;
            switch (obj.event){

                case 'edit':
                    layer.open({
                        title: '编辑',
                        type: 2,
                        area: ['60%','80%'],
                        content:  "{:url('Payment/editPayment')}?id="+id,
                    });
                    break;
                case 'del':
                    layer.confirm('确认要删除吗？',function(obj){
                        //发异步删除数据
                        $.ajax({
                            url: "{:url('/Payment/delPayment')}",
                            type: 'post',
                            data: {id:id},
                            dataType:'json',
                            success: function (data) {
                                if (data.code===200) {

                                    layer.msg('已删除!',{icon:1,time:1000});
                                    location.reload();
                                } else {
                                    layer.msg('数据异常', {icon: 5});
                                }
                            }
                        });


                    });
                    break;
            }
        })

        //  if(handle === '0'){
        // 监听表格头部工具栏事件
        layui.onevent('table', 'toolbar()', obj => {
            // 判断是否是刷新事件(LAYTABLE_REFRESH)


            if ("LAYTABLE_EXPORT" === obj.event) {
                // 刷新当前表格
                layer.open({
                    title: '导出',
                    type: 1,
                    area: ['20%', '30%'],
                    content: "<div style='width:100px;margin: auto;padding-top: 20px;'><button type=\"button\" class=\"layui-btn layui-btn-warm\">已拒绝</button>",
                });
            }
        })
        //  }


        var $ = layui.$, active = {
            reload: function(){

                var store_id = $("#store_id option:selected").val()

                var username = $('#username');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        start_time: $('#start_time').val(),
                        end_time:$('#end_time').val(),
                        username:username.val(),
                        branchId:store_id
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //
        // $.ajax({
        //   url: url,
        //   type: 'post',
        //   data: {
        //     // data.field.其他,
        //     branchId: branchId,
        //     page: 1,
        //     limit: 20000
        //   },
        //   dataType:'json',
        //   beforeSend:function(){
        //     $.jBox.tip("正在导出...", 'loading');
        //   },
        //   success: function (data) {
        //     console.log("返回的参数：" + data);
        //     $.jBox.closeTip();
        //     if (data.code===200) {
        //
        //       console.log(data.data);
        //       table.exportFile('testReload', data.data, 'xls',data.title); //表名 数据  格式
        //     } else {
        //       layer.msg('数据异常', {icon: 5});
        //     }
        //   }
        // });

    });


</script>

</body>
</html>